<template>
  <div class="w-full">
    <div class="gva-btn-list">
      <el-button type="primary" icon="plus" @click="加一行()" plain size="small">加一行</el-button>
      <el-button type="primary" icon="check" @click="提交" plain size="small">提交</el-button>
    </div>
    <el-table style="width: 100%" tooltip-effect="dark" :data="单项组" row-key="id" border>
      <el-table-column align="left" label="序号" prop="序号" width="120">
        <template #default="{ row }">
          <el-input v-model.number="row.序号" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="显示值" prop="显示值" width="120">
        <template #default="{ row }">
          <el-input v-model="row.显示值" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="删行(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import *  as util from '@/amtf/utils'
const 拟删除子表ids = {}
const 单项组 = reactive([])
import useApi from '@/amtf/api/增查api';
const api = useApi();

const props = defineProps({
  名称: String,
  设置: Object,
})
const 名称=props.名称
function 初始化() {
  // console.log(`props.设置 👉`, props.设置)
  util.数组重予(单项组, props.设置[名称]?.内容)
}
// 初始化()

async function 提交() {
  const req = { 名称, 内容: 单项组 }
  const res = await api.增(req)
  console.log(`res 👉`, res)
}

function 加一行() {
  // console.log(`props 👉`, props)
  单项组.unshift({
    序号: 0,
    显示值: "",
  })
}

const 删行 = (index) => {
  单项组.splice(index, 1);
}
watch(() => props.设置[名称] , (newValue, oldValue) => {
  console.log(`props.设置 👉`, props.设置)
  初始化()
})
</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
